<template>
	<view class="full-page">
		<view class="h-10px"></view>
		<u-section title="教学报告" color="#F08519" :right="false">
			<template #right>
				<view class="flex items-center" @tap="show=true">
					<template v-if="StartDate">
						<text class="mr-5px" style="color: #F08519;">{{StartDate}}</text>至
						<text class="ml-5px mr-5px" style="color: #F08519;">{{StartDate}}</text>
					</template>
					<text v-else>日期筛选</text>
					<u-icon name="calendar" style="vertical-align: middle; margin-top: 2px;" :size="40"></u-icon>
				</view>
			</template>
		</u-section>
		<view class="h-10px"></view>
		<u-grid :col="4">
			<u-grid-item>
				<u-icon name="rmb-circle" :size="46"></u-icon>
				<view class="grid-text">未批准</view>
				<view class="grid-text">
					<text class="grid-text-number">{{unPaidAmt}}</text>元
				</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="rmb-circle" :size="46"></u-icon>
				<view class="grid-text">已批准</view>
				<view class="grid-text">
					<text class="grid-text-number">{{paidAmt}}</text>元
				</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="rmb-circle" :size="46"></u-icon>
				<view class="grid-text">已申报</view>
				<view class="grid-text">
					<text class="grid-text-number">{{Approved}}</text>元
				</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="rmb-circle" :size="46"></u-icon>
				<view class="grid-text">已结算</view>
				<view class="grid-text">
					<text class="grid-text-number">{{Settled}}</text>元
				</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="order" :size="46"></u-icon>
				<view class="grid-text">已预约</view>
				<view class="grid-text">
					<text class="grid-text-number">{{sumReserved}}</text>节课
				</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="hourglass" :size="46"></u-icon>
				<view class="grid-text">已授课</view>
				<view class="grid-text">
					<text class="grid-text-number">{{sumCompleted}}</text>节课
				</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="star" :size="46"></u-icon>
				<view class="grid-text">好评度</view>
				<view class="grid-text"><text :class="{'grid-text-number': allPositiveRate !== '暂无'}">{{allPositiveRate}}</text></view>
			</u-grid-item>
			
		</u-grid>
		<view class="h-20px"></view>
		<u-section title="授课详情" color="#F08519" :right="false"></u-section>
		<view class="h-10px"></view>
		<u-table>
			<u-tr class="u-tr">
				<u-th class="u-th">类目</u-th>
				<u-th class="u-th">正式课</u-th>
				<u-th class="u-th">复习课</u-th>
				<u-th class="u-th">体验课</u-th>
			</u-tr>
			<u-tr class="u-tr">
				<u-td class="u-td">已预约</u-td>
				<u-td class="u-td">{{remeberReserved}}节课</u-td>
				<u-td class="u-td">{{reviewReserved}}节课</u-td>
				<u-td class="u-td">{{tasteReserved}}节课</u-td>
			</u-tr>
			<u-tr class="u-tr">
				<u-td class="u-td">已授课</u-td>
				<u-td class="u-td">{{remeberCompleted}}节课</u-td>
				<u-td class="u-td">{{reviewCompleted}}节课</u-td>
				<u-td class="u-td">{{tasteCompleted}}节课</u-td>
			</u-tr>
			<u-tr class="u-tr">
				<u-td class="u-td">好评度</u-td>
				<u-td class="u-td">{{remeberPositiveRate}}</u-td>
				<u-td class="u-td">{{reviewPositiveRate}}</u-td>
				<u-td class="u-td">{{tastePositiveRate}}</u-td>
			</u-tr>
		</u-table>
		<u-calendar v-model="show" mode="range" @change="change"></u-calendar>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { dateFormat, ktluser, ktlapi, getVersion, OT, lodash, isEmpty } from '@/utils';
	import type { LessonInfo } from '../entity/Lesson';
	const user = ktluser.getUser(false)
	
	const show = ref(false);
	let list: LessonInfo[] = [];
	let StartDate = ref('');
	let EndDate = ref('');
	
	// 未审批
	const unPaidAmt = ref(0);
	// 已审批
	const paidAmt = ref(0);
	// 已申报
	const Approved = ref(0);
	// 已结算
	const Settled = ref(0);
	
	// 正式课：已预约
	const remeberReserved = ref(0);
	// 正式课：已授课
	const remeberCompleted = ref(0);
	// 正式课：好评率
	const remeberPositiveRate = ref<string>('暂无');
	
	// 复习课：已预约
	const reviewReserved = ref(0);
	// 复习课：已授课
	const reviewCompleted = ref(0);
	// 复习课：好评率
	const reviewPositiveRate = ref<string>('暂无');
	
	// 体验课：已预约
	const tasteReserved = ref(0);
	// 体验课：已授课
	const tasteCompleted = ref(0);
	// 体验课：好评率
	const tastePositiveRate = ref<string>('暂无');
	
	const allPositiveRate = computed(() => {
		let rer = remeberPositiveRate.value !== '暂无' ? +remeberPositiveRate.value.replace('%', '') : 0;
		let rvr = reviewPositiveRate.value !== '暂无' ? +reviewPositiveRate.value.replace('%', '') : 0;
		let ttr = tastePositiveRate.value !== '暂无' ? +tastePositiveRate.value.replace('%', '') : 0;
		let b = [rer, rvr, ttr].filter(item => item > 0).length;
		if (b === 0) {
			return '暂无'
		}
		return +((rer + rvr + ttr) / b).toFixed(2) + '%'
	})
	const sumCompleted = computed(() => {
		return remeberCompleted.value + reviewCompleted.value + tasteCompleted.value
	})
	const sumReserved = computed(() => {
		return remeberReserved.value + reviewReserved.value + tasteReserved.value
	})
	
	function change(e: any) {
		// endDate: "2025-08-21"
		// endDay: 21
		// endMonth: 8
		// endWeek: "星期四"
		// endYear: 2025
		// startDate: "2025-07-01"
		// startDay: 1
		// startMonth: 7
		// startWeek: "星期二"
		// startYear: 2025
		StartDate.value = e.startDate;
		EndDate.value = e.endDate;
		
		getData();
	}
	
	function initData() {
		// 体验课
		const TasteList = list.filter(item => item.IsTaste);
		tasteReserved.value = TasteList.filter(item => item.Status === 2).length;
		const tasteRS4 = TasteList.filter(item => item.Status > 4);
		tasteCompleted.value = tasteRS4.length;
		const tasteS6 = TasteList.filter(item => item.Status === 6 && !isEmpty(item.EvaluateScore));
		if (tasteS6.length) {
			// 默认好评5
			const tasteScore = tasteS6.reduce((sum, curr) => sum + (isEmpty(curr.EvaluateScore) ? 5 : 0), 0);
			// 满分5分，等价于100分好评度，所以1分=20好评度
			const computedScore = +((tasteScore*20)/(tasteS6.length*100)*100).toFixed(2);
			tastePositiveRate.value = computedScore + '%'
		} else {
			tastePositiveRate.value = '暂无'
		}
		
		// 正式课
		const RemeberList = list.filter(item => item.LessonType = 1);
		remeberReserved.value = RemeberList.filter(item => item.Status === 2).length;
		const remeberRS4 = RemeberList.filter(item => item.Status > 4);
		remeberCompleted.value = remeberRS4.length;
		const remeberS6 = RemeberList.filter(item => item.Status === 6 && !isEmpty(item.EvaluateScore));
		if (remeberS6.length) {
			// 默认好评5
			const remeberScore = remeberS6.reduce((sum, curr) => sum + (isEmpty(curr.EvaluateScore) ? 5 : curr.EvaluateScore), 0);
			// 满分5分，等价于100分好评度，所以1分=20好评度
			const computedScore = +((remeberScore*20)/(remeberS6.length*100)*100).toFixed(2);
			remeberPositiveRate.value = computedScore + '%'
		} else {
			remeberPositiveRate.value = '暂无'
		}
		
		// 保温课
		const ReviewList = list.filter(item => item.LessonType === 2);
		reviewReserved.value = ReviewList.filter(item => item.Status === 2).length;
		const reviewRS4 = ReviewList.filter(item => item.Status > 4);
		reviewCompleted.value = reviewRS4.length;
		const reviewS6 = ReviewList.filter(item => item.Status === 6 && !isEmpty(item.EvaluateScore));
		if (reviewS6.length) {
			// 默认好评5
			const reviewScore = reviewS6.reduce((sum, curr) => sum + (isEmpty(curr.EvaluateScore) ? 5 : 0), 0);
			// 满分5分，等价于100分好评度，所以1分=20好评度
			const computedScore = +((reviewScore*20)/(reviewS6.length*100)*100).toFixed(2);
			reviewPositiveRate.value = computedScore + '%'
		} else {
			reviewPositiveRate.value = '暂无'
		}
	}
	
	function getData() {
		ktlapi({
			apiurl: OT.CommandSet,
			action: 'Cus_GetTeacherDataCnt',
			data: {
				AccountId: user.AccountID,
				StartDate: StartDate.value + ' 00:00:00',
				EndDate: EndDate.value + ' 23:59:59'
			}
		}).then((resp: any) => {
			list = lodash.get(resp, 'data.tables[0].table', []);
			const ApprovedList = lodash.get(resp, 'data.tables[1].table', []);
			const SettleList = lodash.get(resp, 'data.tables[2].table', []);
			
			unPaidAmt.value = ApprovedList
				.filter((item: any) => !item.Paid)
				.reduce((prev: number, curr: any) => prev + curr.FeeRMB, 0);
			
			paidAmt.value = ApprovedList
				.filter((item: any) => item.Paid)
				.reduce((prev: number, curr: any) => prev + curr.FeeRMB, 0);
			
			Approved.value = SettleList
				.filter((item: any) => !item.SettlePaid)
				.reduce((prev: number, curr: any) => prev + curr.FeeRMB, 0);
				
			Settled.value = SettleList
				.filter((item: any) => item.SettlePaid)
				.reduce((prev: number, curr: any) => prev + curr.FeeRMB, 0);
				
			initData();
		})
	}

	getData();
</script>

<style lang="scss" scoped>
	.full-page{
		padding-left: 15px;
		padding-right: 15px;
	}
	.grid-text{
		font-size: var(--text-12);
	}
	.grid-text-number{
		display: inline-block;
		margin: 0 2px;
		color: #F08519;
		font-weight: 600;
	}
</style>